<template>
  <div>
    <!-- 登陆页面 -->
    <div v-if="changePage">
      <el-form
        ref="loginForm"
        :model="formData"
        :rules="formRules"
        hide-required-asterisk
      >
        <el-form-item label="" prop="username">
          <el-input
            v-model="formData.username"
            clearable
            size="medium"
            placeholder="请输入账号"
            prefix-icon="el-icon-user"
          />
        </el-form-item>
        <el-form-item style="padding-top: 1%" label="" prop="password">
          <el-input
            v-model="formData.password"
            show-password
            clearable
            size="medium"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
          />
        </el-form-item>
      </el-form>
      <div class="login-btn">
        <el-button type="primary" size="medium" @click="login">登录</el-button>
      </div>
    </div>
    <!-- 功能页面 -->
    <div v-else>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import axios from "axios";

const ruleForm = ref(null);
const afterSubmit = ref(true);
const formData = reactive({
  phoneNumber: "",
});
const tableData = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]);
const rules = {
  phoneNumber: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!value) {
          callback(new Error("请输入手机号"));
        } else if (!phoneRegex.test(value)) {
          callback(new Error("请输入有效的手机号"));
        } else {
          callback(); // 校验通过
        }
      },
      trigger: "blur",
    },
  ],
};
const onSubmit = () => {
  ruleForm.value.validate(async (valid) => {
    if (valid) {
      const wechatOrderNum = localStorage.getItem("orderId");
      const data = {
        id: wechatOrderNum,
        phoneNumber: form.phoneNumber,
      };
      axios
        .post("/api/order/update", data)
        .then((res) => {
          window.location.href =
            "https://zhb.tgzhb.cn/l/cawcdec2716ba0def4.html";
        })
        .catch((error) => {
          console.error("获取 IP 地址失败：", error);
        });

      // http://121.89.85.110:6000/api/order/update
      // afterSubmit.value = false;
      // router.push("/dashboard");
    }
  });
};
const addKefu = () => {
  // router.push("/addKefu");
};
</script>

<style scoped>
@import url("../../assets/index_static/app.css");
</style>
